import React from 'react'
import { Box } from '$components';
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
function PopulationDynamics() {

    let xaxisData = ["民用建筑", "工业建筑", "森林", "地下建筑", "水上"];
    let yaxisData = [150, 150, 150, 150, 150];

    const getSymbolData = (datas) => {
        let arr = [];
        for (var i = 0; i < datas.length; i++) {
            arr.push({
                value: datas[i],
                symbolPosition: "end",
            });
        }
        return arr;
    };

    let option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
            backgroundColor: "rgba(255,255,255,0.75)",
            extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
            textStyle: {
                fontSize: 14,
                color: "#000",
            },
            formatter: (params) => {
                const item = params[0];
                return item.name + " : " + item.value + " 条";
            },
        },
        legend: {
            top: 10,
            itemWidth: 20,
            itemHeight: 10,
            // icon: "roundRect",
            left: "center",
            padding: 0,
            textStyle: {
                color: "#E6E6E7",
                fontSize: 14,
                padding: [2, 0, 0, 0],
            },
        },
        grid: {
            left: 25,
            right: 25,
            top: 50,
            bottom: 10,
            containLabel: true,
        },
        xAxis: [
            {
                type: "category",
                axisLabel: {
                    interval: 0,
                    color: "rgba(195, 230, 255, 1)",
                    fontSize: 12,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        type: 'solid',
                        //y轴网格线设置
                        color: "rgba(184, 185, 188, 0.5)",
                        width: 1,
                    },
                },
                axisTick: {
                    show: false,
                },
                data: xaxisData,
            },
        ],
        yAxis: [
            {
                max: 225,
                interval: 25,
                type: "value",

                name: "单位:次",
                nameGap: 30,
                nameTextStyle: {
                    color: "rgba(195, 230, 255, 1)",
                    fontWeight: 400,
                    fontSize: 14,
                    padding: [-20, 20, 0, 0]
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,

                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(89, 153, 200, 0.5)'
                    }
                },
                axisLabel: {
                    show: true,
                    fontSize: 12,
                    color: "rgba(195, 230, 255, 1)",
                },
            },
        ],
        series: [
            {
                type: "bar",
                barWidth: 16,
                label: {
                    show: false,
                    position: "top",
                    color: "#00A8FF",

                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "#00A8FF",
                        },
                        {
                            offset: 1,
                            color: "rgba(0, 122, 255, 0)",
                        },
                    ]),
                },
                data: yaxisData,
            },
            {
                type: "pictorialBar",
                symbol: "react",
                symbolSize: [18, 8],
                symbolOffset: [0, -5],
                z: 12,
                itemStyle: {
                    color: "#fff",
                },
                data: getSymbolData(yaxisData),
            },
        ],
    };

    return <Box title={"火灾分类"} subtitle>
        <ReactEcharts
            option={option}
            notMerge
            lazyUpdate
            style={{ height: 231, width: 423 }}
        />
    </Box>
}

export default PopulationDynamics;


